<template>
	<view class="data-v-0de8b7e0 container dynamic">

		<view class="main data-v-0de8b7e0">
			<view class="header-title data-v-0de8b7e0">
				<view class="left data-v-0de8b7e0">{{product.productTitle}}</view>
				<view class="right data-v-0de8b7e0">{{subjectIndex+1+'/'+subjectList.length}}</view>
			</view>
			<view class="header-progress data-v-0de8b7e0">
				<view class="progress-icon data-v-0de8b7e0">
					<image class="data-v-0de8b7e0" mode="widthFix"
						src="https://ttmini.yizhiwechat.com/ytKnowledgePlanet/exam/icon-order.png"></image>
				</view>
				<view class="progress-warp data-v-0de8b7e0">
					<view class="progress-bar data-v-0de8b7e0" :style="{width:progressWidth}"></view>
				</view>
			</view>
			<view class="header-hr data-v-0de8b7e0"></view>
			<view class="answer-main data-v-0de8b7e0">
				<view class="answer-item data-v-0de8b7e0">
					<view class="title data-v-0de8b7e0">{{subject.subjectText}}</view>
				</view>
				<view class="answer-items">
					<ul>
						<li v-for="subject in subject.children" :key="subject.subjectId" @click='nextSubject'>
							<view class="answer-items-option">{{subject.isSort}}</view>
							<view class="answer-items-option-answer">{{subject.subjectText}}</view>
						</li>
					</ul>
				</view>
			</view>
		</view>

			<view class="data-v-0de8b7e0 mask visible" v-if="isExamEnd">
				<view class="dialog-body data-v-0de8b7e0">
					<view class="title data-v-0de8b7e0">答题完成</view>
					<view class="text1 data-v-0de8b7e0">恭喜你完成所有答题</view>
					<view class="text2 data-v-0de8b7e0">观看视频，免费查看结果</view>
					  <!--  <view slot="pay">
							<button class="submit-btn pay-btn data-v-0de8b7e0">1元立即查看结果</button>
						</view> -->
							<view slot="ad">
									<button class="submit-btn data-v-0de8b7e0" @click="showAd">
										<image class="data-v-0de8b7e0" mode="aspectFit" src="https://ttmini.yizhiwechat.com/ytKnowledgePlanet/exam/answer-btn.png">
										</image>
									</button>
							</view>
				</view>
			</view>
	</view>

</template>

<script>
	import { loadSubjectList } from '@/api/index.js';
	import { ChangeDecimalToPercentage } from '@/common/public.js';
	import { handlerTreeColumSort, handleTree } from '@/common/tree.js';

	export default {
		data() {
			return {
				progressWidth:null,
				subjectIndex:0,
				product:null,
				subject:null,
				subjectList:[],
				isExamEnd: false
			}
		},
		onLoad(option) {
			this.loadSubjectList(option.productId);
			this.loadAd();
		},
		methods: {
			async loadSubjectList(productId){
			  let { data } = await loadSubjectList({productId});
			  if ( data.code === 200) {
				  this.product = data.data.product;
				  let treeData = handleTree(data.data.subjectList, "subjectId", "subjectPid");
				  let treeSortData = handlerTreeColumSort(treeData,"isSort");
				  this.subjectList = treeSortData;
				  this.subjectHandler();
			  }
			},
			subjectHandler(){
				this.subject = this.subjectList[this.subjectIndex];
				let decimal = (this.subjectIndex+1)/this.subjectList.length;
				this.progressWidth = ChangeDecimalToPercentage(decimal);
			},
			nextSubject(){
				if(this.subjectIndex+1 == this.subjectList.length){
					this.isExamEnd = true;
				};
				if(!this.isExamEnd){
					this.subjectIndex+=1;
				}
				setTimeout(()=>{
					this.subjectHandler();
				},300)
			},
			loadAd(){
				// 创建实例
				this.ad = uni.createRewardedVideoAd({
					adUnitId: "5a7p6fssmhj37njtl0",
				});
				// 监听错误
				this.ad.onError((err) => {
					tt.hideLoading();
				});
				// 监听视频播放完成
				this.ad.onClose((data) => {
					tt.hideLoading();
					if (data.isEnded) {
						this.loadResult();
					} else {
						console.log("未观看完视频");
					}
				});
				// 预加载资源
				this.ad.load();
			},
			showAd(){
				uni.showLoading();
				this.ad.show();
			},
			loadResult(){
				uni.navigateTo({
					url: '/pages/result/index?id=1'
				});
			}
		}
	}
</script>

<style scoped>
	.container.data-v-0de8b7e0 {
		display: flex;
		-webkit-box-align: center;
		align-items: center;
		-webkit-box-pack: center;
		justify-content: center;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		flex-flow: column;
	}

	.container.uncenter.data-v-0de8b7e0 {
		-webkit-box-pack: start;
		justify-content: flex-start;
	}

	.container.dynamic.data-v-0de8b7e0 {
		background: #60b0fc url(https://ttmini.yizhiwechat.com/ytKnowledgePlanet/exam/bg-question.png) repeat-y 0 0/100% 204rpx;
		animation: dynamic-bg-data-v-0de8b7e0 3s linear infinite;
	}

	.container.dynamic.data-v-0de8b7e0::after {
		content: "";
		display: block;
		width: 100%;
		height: 50%;
		background: linear-gradient(0deg, #60b0fc, rgba(96, 176, 252, 0));
		position: absolute;
		left: 0;
		bottom: 0;
	}

	@-webkit-keyframes dynamic-bg-data-v-0de8b7e0 {
		0% {
			background-position-y: 0;
		}

		100% {
			background-position-y: 204rpx;
		}
	}

	@keyframes dynamic-bg-data-v-0de8b7e0 {
		0% {
			background-position-y: 0;
		}

		100% {
			background-position-y: 204rpx;
		}
	}

	.main.data-v-0de8b7e0 {
		-webkit-box-flex: 0;
		flex: 0 0 710rpx;
		position: relative;
		width: 710rpx;
		z-index: 10;
		margin: 88rpx 0 30rpx;
	}

	.main .header-title.data-v-0de8b7e0 {
		position: absolute;
		top: calc(-66rpx + 2px);
		width: 100%;
		display: flex;
		-webkit-box-align: end;
		align-items: flex-end;
		-webkit-box-pack: justify;
		justify-content: space-between;
		padding: 0 36rpx;
	}

	.main .header-title .left.data-v-0de8b7e0,
	.main .header-title .right.data-v-0de8b7e0 {
		-webkit-box-flex: 0;
		flex: 0 0 426rpx;
		height: 66rpx;
		background: url(https://ttmini.yizhiwechat.com/ytKnowledgePlanet/exam/title-bg1.png) no-repeat;
		background-size: 100% 100%;
		font-size: 26rpx;
		color: #343434;
		line-height: 66rpx;
		text-align: center;
	}

	.main .header-title .right.data-v-0de8b7e0 {
		-webkit-box-flex: 0;
		flex: 0 0 126rpx;
		height: 50rpx;
		background: url(https://ttmini.yizhiwechat.com/ytKnowledgePlanet/exam/title-bg2.png?v=2) no-repeat;
		background-size: 100% 100%;
		color: #1e2088;
		line-height: 50rpx;
	}

	.main .answer-main.data-v-0de8b7e0,
	.main .header-progress.data-v-0de8b7e0 {
		border: 2px solid #1e2088;
		border-bottom: none;
		border-radius: 20rpx 20rpx 0 0;
		padding: 36rpx 36rpx 12rpx;
		background-color: #fff;
	}

	.main .header-progress.data-v-0de8b7e0 {
		-webkit-box-pack: justify;
		justify-content: space-between;
	}

	.main .header-progress.data-v-0de8b7e0,
	.main .header-progress .progress-icon.data-v-0de8b7e0 {
		display: flex;
		-webkit-box-align: center;
		align-items: center;
	}

	.main .header-progress .progress-icon.data-v-0de8b7e0 {
		-webkit-box-flex: 0;
		flex: 0 0 60rpx;
		height: 60rpx;
		border-radius: 50%;
		border: 1px solid #1e2088;
		-webkit-box-pack: center;
		justify-content: center;
		background: #60b0fc;
	}

	.main .header-progress .progress-icon image.data-v-0de8b7e0 {
		width: 26rpx;
		height: 30rpx;
	}

	.main .header-progress .progress-warp.data-v-0de8b7e0 {
		background: #f2f4f7;
		border: 1px solid #1e2088;
		border-radius: 30rpx;
		height: 36rpx;
		-webkit-box-flex: 1;
		flex: 1 1 auto;
		margin-left: 20rpx;
		overflow: hidden;
		box-sizing: initial;
	}

	.main .header-progress .progress-warp .progress-bar.data-v-0de8b7e0 {
		background: #60b0fc;
		border-radius: 30rpx;
		height: 36rpx;
	}

	.main .header-hr.data-v-0de8b7e0 {
		display: block;
		background: url(https://ttmini.yizhiwechat.com/ytKnowledgePlanet/exam/icon-line.png) no-repeat;
		background-size: 100% 100%;
		margin: -1px 0;
		width: 100%;
		height: 48rpx;
	}

	.main .answer-main.data-v-0de8b7e0 {
		padding: 12rpx 20rpx 50rpx;
		border-radius: 0 0 20rpx 20rpx;
		border-top: none;
		border-bottom: 2px solid #1e2088;
		min-height: 750rpx;
	}

	.answer-item .title.data-v-0de8b7e0 {
		font-size: 34rpx;
		line-height: 54rpx;
		font-weight: bolder;
		margin-bottom: 30rpx;
	}

	.answer-item .title-image.data-v-0de8b7e0 {
		width: 640rpx;
		height: 300rpx;
		margin: 0 auto;
		background: #e6e6e6;
		border: 2px solid #1d2088;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.answer-item .title-image image.data-v-0de8b7e0 {
		width: 100%;
		height: 100%;
	}

	.answer-item .options-warp.data-v-0de8b7e0 {
		overflow: hidden;
	}

	.answer-item .options-warp .option.data-v-0de8b7e0 {
		display: flex;
		-webkit-box-align: center;
		align-items: center;
		padding: 14rpx 24rpx 14rpx 14rpx;
		border: 2px solid #f2f2f2;
		background-color: #e6e6e6;
		border-radius: 46rpx;
		margin-top: 32rpx;
		overflow: hidden;
		color: #444;
	}

	.answer-item .options-warp .option.correct.data-v-0de8b7e0 {
		border-color: #68fbc5;
		color: #fff;
		background: url(https://ttmini.yizhiwechat.com/ytKnowledgePlanet/exam/answer-decorate.png) no-repeat 50%/cover, #2ede9c url(https://ttmini.yizhiwechat.com/ytKnowledgePlanet/exam/icon-success.png) no-repeat 100%/119rpx 90rpx;
	}

	.answer-item .options-warp .option.correct .option-index.data-v-0de8b7e0 {
		color: #006e46;
		border-color: #006e46;
		background-color: #52f0b6;
	}

	.answer-item .options-warp .option.wrong.data-v-0de8b7e0 {
		border-color: #ff9c9e;
		color: #fff;
		background: url(https://ttmini.yizhiwechat.com/ytKnowledgePlanet/exam/answer-decorate.png) no-repeat 50%/cover, #fe686a url(https://ttmini.yizhiwechat.com/ytKnowledgePlanet/exam/icon-error.png) no-repeat 100%/99rpx 99rpx;
	}

	.answer-item .options-warp .option.wrong .option-index.data-v-0de8b7e0 {
		color: #ab0002;
		border-color: #ab0002;
		background-color: #ff9496;
	}

	.answer-item .options-warp .option-index.data-v-0de8b7e0 {
		-webkit-box-flex: 0;
		flex: 0 0 62rpx;
		height: 62rpx;
		border-radius: 50%;
		display: flex;
		-webkit-box-align: center;
		align-items: center;
		-webkit-box-pack: center;
		justify-content: center;
		color: #707070;
		font-size: 34rpx;
		background: #f3f3f3;
		border: 1px solid #6f6f6f;
		line-height: 34rpx;
		font-weight: bolder;
	}

	.answer-item .options-warp .option-text.data-v-0de8b7e0 {
		-webkit-box-flex: 1;
		flex: 1 1 auto;
		padding-left: 20rpx;
		font-size: 36rpx;
		line-height: 42rpx;
	}

	.answer-item .options-warp.image.data-v-0de8b7e0 {
		display: flex;
		-webkit-box-align: center;
		align-items: center;
		-webkit-box-pack: justify;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.answer-item .options-warp.image .option.data-v-0de8b7e0 {
		-webkit-box-flex: 0;
		flex: 0 0 320rpx;
		margin-bottom: 20rpx;
		flex-wrap: wrap;
		border: none;
		padding: 0;
		border-radius: 20rpx;
	}

	.answer-item .options-warp.image .option.correct.data-v-0de8b7e0 {
		background: url(https://ttmini.yizhiwechat.com/ytKnowledgePlanet/exam/answer-decorate.png) no-repeat bottom/cover, #2ede9c url(https://ttmini.yizhiwechat.com/ytKnowledgePlanet/exam/icon-success.png) no-repeat 100% 100%/119rpx 90rpx;
	}

	.answer-item .options-warp.image .option.wrong.data-v-0de8b7e0 {
		background: url(https://ttmini.yizhiwechat.com/ytKnowledgePlanet/exam/answer-decorate.png) no-repeat bottom/cover, #fe686a url(https://ttmini.yizhiwechat.com/ytKnowledgePlanet/exam/icon-error.png) no-repeat 100% 100%/99rpx 99rpx;
	}

	.answer-item .options-warp.image .option-image.data-v-0de8b7e0 {
		-webkit-box-flex: 1;
		flex: 1 1 320rpx;
		width: 320rpx;
		height: 240rpx;
		border-radius: 20rpx;
	}

	.answer-item .options-warp.image .option-index.data-v-0de8b7e0 {
		margin: 12rpx 0 12rpx 12rpx;
	}

	.answer-item .options-warp.image .option-text.data-v-0de8b7e0 {
		padding: 0 20rpx 0 12rpx;
		-webkit-box-flex: 0;
		flex: 0 0 234rpx;
		text-align: center;
	}

	.mask.data-v-0de8b7e0 {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background: rgba(20, 18, 36, .7);
		z-index: 100;
		animation: fade-in .35s linear;
		display: none;
	}

	.mask.visible.data-v-0de8b7e0 {
		display: block;
	}

	.mask .dialog-body.data-v-0de8b7e0 {
		width: 640rpx;
		border-radius: 50rpx;
		padding: 0 50rpx 60rpx;
		margin: 25vh auto 0;
		position: relative;
		z-index: 101;
		animation: fade-top .35s linear;
		font-size: 34rpx;
		text-align: center;
		background: #fff url(https://ttmini.yizhiwechat.com/ytKnowledgePlanet/exam/trophy.png) no-repeat center 8%/463rpx;
	}

	.mask .dialog-body-qq.data-v-0de8b7e0 {
		width: 640rpx;
		background: #fff;
		border-radius: 40rpx;
		font-size: 34rpx;
		color: #fc3e50;
		text-align: center;
		margin: 17vh auto 0;
		padding: 59rpx 20px 62rpx;
	}

	.mask .dialog-body-qq .title-qq.data-v-0de8b7e0 {
		margin-bottom: 80rpx;
	}

	.mask .dialog-body-qq .t-q1.data-v-0de8b7e0 {
		color: #444;
		margin: 32rpx auto;
	}

	.mask .dialog-body-qq .unit-card.data-v-0de8b7e0 {
		margin: 15rpx auto 0;
	}

	.mask .title.data-v-0de8b7e0 {
		color: #fea406;
		font-weight: 700;
		font-size: 46rpx;
		padding: 60rpx 0 320rpx;
	}

	.mask .text1.data-v-0de8b7e0 {
		color: #fe686a;
		margin-bottom: 12rpx;
	}

	.mask .text2.data-v-0de8b7e0 {
		color: #9a9a9a;
		margin-bottom: 50rpx;
	}

	.mask .submit-btn.data-v-0de8b7e0 {
		width: 100%;
		height: 124rpx;
	}

	.mask .submit-btn.pay-btn.data-v-0de8b7e0 {
		background: url(https://ttmini.yizhiwechat.com/yzsingleTool/btns/%E7%9F%A5%E8%AF%86%E6%98%9F%E7%90%83.png) no-repeat 50%/contain;
		color: #fff;
		font-size: 42rpx;
		line-height: 98rpx;
	}

	.mask .submit-btn image.data-v-0de8b7e0 {
		width: 100%;
		height: 100%;
	}

	.product-main.data-v-0de8b7e0 {
		width: 710rpx;
		display: flex;
		background: #fff;
		border-radius: 20rpx;
		margin-top: 30rpx;
		border: 2px solid #1e2088;
		padding: 24rpx 20rpx 10rpx;
	}

	.product-main .icon.data-v-0de8b7e0 {
		-webkit-box-flex: 0;
		flex: 0 0 192rpx;
	}

	.product-main .icon image.data-v-0de8b7e0 {
		width: 160rpx;
		height: 160rpx;
		border-radius: 4px;
	}

	.product-main .detail.data-v-0de8b7e0 {
		-webkit-box-flex: 1;
		flex: 1 1 auto;
	}

	.product-main .detail .product-title.data-v-0de8b7e0 {
		color: #404040;
		font-size: 32rpx;
	}

	.product-main .detail .product-desc.data-v-0de8b7e0 {
		color: #999;
		font-size: 24rpx;
		width: 470rpx;
		line-height: 36rpx;
		min-height: 72rpx;
	}

	.product-main .detail .product-tags.data-v-0de8b7e0 {
		display: inline-grid;
		grid-template-columns: repeat(4, 98rpx);
		grid-template-rows: repeat(1, 48rpx);
		margin-top: 17rpx;
	}

	.product-main .detail .product-tags .tags.data-v-0de8b7e0 {
		width: 80rpx;
		height: 33rpx;
	}
	.answer-items {
		color: rgb(68, 68, 68);
	}
	.answer-items ul li{
		background-color: rgb(230, 230, 230);
		margin: 35rpx 35rpx 35rpx 35rpx;
		padding: 25rpx 25rpx 25rpx 25rpx;
		border-top-left-radius: 80rpx;
		border-top-right-radius: 80rpx;
		border-bottom-right-radius: 80rpx;
		border-bottom-left-radius: 80rpx;
		transition:0s 0.1s;
	}
	.answer-items ul li:active{
		background: url(https://ttmini.yizhiwechat.com/ytKnowledgePlanet/exam/answer-decorate.png) no-repeat bottom/cover,#2ede9c url(https://ttmini.yizhiwechat.com/ytKnowledgePlanet/exam/icon-success.png) no-repeat 100% 100%/119rpx 90rpx;
		color: white;
		transition:0s;
	}
	.answer-items-option{
		border: 3rpx black solid;
		display: inline-block;
		margin-right: 20rpx;
		border-radius: 50%;
		height: 50rpx;
		width: 50rpx;
		text-align: center;
		font-weight: 1000;
	}
	.answer-items-option-answer {
		display: inline-block;
		font-weight: 1000;
	}
</style>
